<template>
  <div class="holidays-select">
    <div v-if="type === 'select'" class="select">
      <el-select
        v-model="val"
        clearable
        placeholder="请选择节假日"
        @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.label"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div v-else-if="type === 'date'" class="date">
      <el-date-picker
        v-model="val"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
        @change="onChange">
      </el-date-picker>
    </div>
    <div v-else-if="type === 'daterange'" class="daterange">
      <el-date-picker
        v-model="val"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        @change="onChange">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns'
const holidaysJson = require('./holidays.json')
export default {
  name: 'holidays-select',
  props: {
    type: {
      type: String,
      default: 'select'
    },
    value: {
      type: [String, Array],
      default: ''
    },
    index: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      val: '',
      options: [],
      springFestival: ['除夕', '初一', '初二', '初三', '初四', '初五', '初六'],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() || !Object.values(holidaysJson).filter(e => e.holiday).map(i => { return i.date }).includes(format(new Date(time), 'yyyy-MM-dd'))
        }
      },
      legalDate: [],
      key2: 0
    }
  },
  created () {
    this.init()
  },
  watch: {
    value: {
      immediate: true,
      handler (newValue) {
        this.val = newValue || ''
        if (this.type === 'select') {
          this.val = typeof newValue !== 'string' ? newValue.join(',') : newValue
        }
        console.log(this.val)
      }
    }
  },
  methods: {
    init () {
      if (typeof this.value === 'string' && this.type !== 'daterange') {
        this.val = this.value.split(',')
      }
      if (this.type === 'date') {
        this.val = String(this.val)
      }
      if (this.type === 'select') {
        this.selectInit()
      }

      this.legalDate = Object.values(holidaysJson).filter(e => e.holiday).map(i => { return i.date })
    },
    selectInit () {
      const holidayObj = {}
      const holidays = Object.values(holidaysJson)
      holidays
        .filter(e => e.holiday)
        .forEach(i => {
          if (this.springFestival.includes(i.name)) {
            console.log('----', holidayObj['春节'])
            if (holidayObj['春节']) {
              holidayObj['春节'].push(i.date)
            } else {
              holidayObj['春节'] = [i.date]
            }
          } else if (holidayObj[i.name]) {
            holidayObj[i.name].push(i.date)
          } else {
            holidayObj[i.name] = [i.date]
          }
        })
      const options = []
      for (const key in holidayObj) {
        const item = holidayObj[key]
        options.push({
          value: item.join(','),
          label: key
        })
      }
      this.options = options.sort((a, b) => new Date(a.value[0]) > new Date(b.value[0])).slice()
    },
    onChange () {
      if (this.type === 'date') {
        this.$emit('change', this.val, this.index)
      }
      if (this.type === 'daterange') {
        this.$emit('change', this.legalDate.filter(v => {
          return ((new Date(this.val[0])).getTime() <= (new Date(v + ' 00:00')).getTime() && (new Date(this.val[1])).getTime() >= (new Date(v + ' 00:00')).getTime())
        }), this.index)
      }
      if (this.type === 'select') {
        const result = this.options.find(i => i.value === this.val)
        const label = result ? result.label : ''
        this.$emit('change', this.val.split(','), label, this.index)
      }
    }
  }
}
</script>

<style scoped>

</style>
